<template>
  <el-transfer v-model="value" filterable :filter-method="filterMethod" filter-placeholder="请输入药品名称搜索"
    :data="data" :titles="['未添加','已添加']" style="text-align: left; display: inline-block" />
</template>

<script lang="ts" setup>
import { ref, defineExpose ,defineProps} from 'vue'

const props=defineProps({
   ids:[],
})
interface Option {
  key: number
  label: string
  initial: string
}

import { getAllDish } from '@/apis/dish'
const data = ref<Option[]>([]);
async function getDish() {
  const res = await getAllDish();
  console.log(res.data.data);
  const dishList = res.data.data;
  dishList.forEach((dish: any) => {
    data.value.push({
      key: dish.id,
      label: dish.name + ' - - - ' + (dish.status === 1 ? '启售' : '停售') + ' - - - ' + dish.price,
      initial: dish.name
    })
  })
  console.log(props.ids);
  // 初始化时，将已选择的药品添加到右侧列表
  value.value = props.ids.map((item) => item)
  console.log(data.value);
}
getDish();
const value = ref([])

const filterMethod = (query, item) => {
  return item.initial.toLowerCase().includes(query.toLowerCase())
}
defineExpose({
  value
})
</script>
<style>
.transfer-footer {
  margin-left: 20px;
  padding: 6px 5px;
}

 .el-transfer-panel {
  width: 300px;
  /* 左右两个穿梭框的高度和宽度 */
  height: 400px;
}

 .el-transfer-panel__list.is-filterable {
  height: 220px;
  /* 穿梭框列表高度 */
}
</style>